<template>
	<div class="page-component__scroll">
		<el-backtop target=".page-component__scroll"></el-backtop>
		<el-row style="margin-bottom: 15px;">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>首页</el-breadcrumb-item>
				<el-breadcrumb-item>帮买废品回收</el-breadcrumb-item>
				<el-breadcrumb-item>门店管理</el-breadcrumb-item>
			</el-breadcrumb>
		</el-row>
		<el-row>
			<el-col :span="4">
				<el-image style="width: 100px; height: 100px" :src="storeInfo.shopImage"></el-image>
			</el-col>
			<el-col :span="4" style="padding-top: 30px;">
				{{ storeInfo.shopSta }}
			</el-col>
			<el-col :span="6">
				门店手机号: &nbsp;{{ storeInfo.shopPhone }} <br>
				门店详细地址: &nbsp;{{ storeInfo.shopAddress }} <br>
				营业时间: &nbsp;{{ storeInfo.shopDescribe }} <br>
			</el-col>
			<el-col :span="6">
				添加时间: &nbsp;{{ storeInfo.addTime }}
			</el-col>
		</el-row>
		<el-row>
			<el-form :inline="true" :model="queryInfo" class="demo-form-inline">
				<el-form-item label="商品标题:">
					<el-input @clear="querySelect" clearable v-model="queryInfo.keyword"
						placeholder="请输入门店名称"></el-input>
				</el-form-item>
				<el-form-item label="发布日期">
					<el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="date" type="daterange"
						range-separator="至" clearable start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-button @click="querySelect" class="bai">搜索</el-button>
				<el-button type="primary" plain @click="goBack">返回</el-button>
			</el-form>
		</el-row>
		<el-row>
			<el-button @click="add" type="primary" plain size="medium">新增商品</el-button>
		</el-row>
		<el-row>
			<el-table :data="goodsList" border style="width: 100%"
				:header-cell-style="{ backgroundColor: '#1890FF', color: '#FFFFFF' }">
				<el-table-column align="center" prop="goodsImage" label="商品图片">
				</el-table-column>
				<el-table-column align="center" prop="goodsName" label="商品名字">
				</el-table-column>
				<el-table-column align="center" prop="goodsPresentPrice" label="商品现价">
				</el-table-column>
				<el-table-column align="center" prop="goodsSalesVolume" label="商品销量">
				</el-table-column>
				<el-table-column align="center" prop="goodsCartCount" label="商品购物车数量">
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<el-button @click="edit(scope.row)" class="edit" type="text" size="small">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-row>
			<el-pagination @current-change="getPage" background layout="prev, pager, next" :total="total">
			</el-pagination>
		</el-row>
		<el-row>
			<el-button type="primary" plain @click="goBack">返回</el-button>
		</el-row>

		<el-row>
			<el-dialog @close="clear" :title="isadd ? '新增商品' : '编辑商品'" :visible.sync="dialogFormVisible">
				<el-form :model="goods">
					<el-form-item label="商品名称" :label-width="70 + 'px'">
						<el-input v-model="goods.goodsName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="商品现价" :label-width="70 + 'px'">
						<el-input-number v-model="goods.goodsPresentPrice" :precision="1" controls-position="right"
							:step="0.1" :min="0.1"></el-input-number>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="clear">取 消</el-button>
					<el-button v-if="isadd" type="primary" plain @click="newAdd">新 增</el-button>
					<el-button v-else type="primary" plain @click="update">修 改</el-button>
				</div>
			</el-dialog>
		</el-row>
	</div>
</template>
<script>
	export default {
		props: ['storeInfo'],
		data() {
			return {
				queryInfo: {
					pageNum: 1,
					pageSize: 10,
					keyword: '',
					goodsStatus: '',
					shopId: this.storeInfo.shopId,
					startTime: '',
					endTime: ''
				},
				total: 0,
				goodsList: [],
				goods: {
					goodsImage: '',
					goodsName: '',
					goodsPresentPrice: '',
					goodsUnit: '',
					shopId: this.storeInfo.shopId
				},
				date: '',
				isadd: false,
				dialogFormVisible: false,
			}
		},
		methods: {
			querySelect() {
				this.$http.get('shop/getPanghuShopGoodsList', {
					params: this.queryInfo
				}).then(res => {
					let d = res.data
					if (d.status == 200) {
						d = d.data
						this.total = d.total
						this.goodsList = d.list
					} else {
						this.$message.error('数据获取失败')
					}
				}).catch(err => {
					this.$message.error('服务器响应异常')
				})
			},
			//返回门店管理主页
			goBack() {
				// this.$router.push('/help/store')
				this.$emit('shutdown', true)
			},
			//点击新增商品按钮
			add() {
				this.dialogFormVisible = true
				this.isadd = true
			},
			//点击编辑商品按钮
			edit(row) {
				this.goods = row
				this.dialogFormVisible = true
				this.isadd = false
			},
			//新增商品
			newAdd() {
				this.$http.post('goods/addShopGoods', this.goods)
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success('添加成功')
							this.clear()
							this.querySelect()
						}
					}).catch(err => {
						this.$message.error('服务器响应异常')
					})
			},

			//修改商品
			update() {
				this.$http.post('goods/modifyShopGoods', this.goods)
					.then(res => {
						if (res.data.status == 200) {
							this.$message.success(res.data.message)
							this.clear()
							this.querySelect()
						}
					}).catch(err => {
						this.$message.error('服务器响应异常')
					})
			},
			//关闭对话框清除商品信息
			clear() {
				this.dialogFormVisible = false
				this.goods = {
					goodsImage: '',
					goodsName: '',
					goodsPresentPrice: '',
					goodsUnit: '',
					shopId: this.storeInfo.shopId
				}
			},
			//分页页码改变
			getPage(index) {
				this.queryInfo.pageNum = index
				this.querySelect()
			}

		},
		mounted() {
			// console.log(this.storeInfo)
			this.querySelect()
		},
		watch: {
			date() {
				if (this.date) {
					this.queryInfo.startTime = this.date[0]
					this.queryInfo.endTime = this.date[1]
				} else {
					this.queryInfo.startTime = ''
					this.queryInfo.endTime = ''
					this.querySelect()
				}
			}
		}
	}
</script>
<style scoped>
	.el-row {
		margin-bottom: 10px
	}

	.edit {
		color: rgb(68, 158, 188)
	}

	.edit:hover {
		opacity: 0.7
	}
</style>